<template>
  <page ref="pageRef">
    <view style="padding-top: 100rpx; text-align: center">
      <image class="image" :src="ossurl.login.loginLogo" mode="widthFix" />
    </view>
    <view class="bottom">
      <view class="agree" @click="agreeFlag = !agreeFlag">
        <radio
          :checked="agreeFlag"
          style="transform: scale(0.6)"
          color="#8b3dff"
        />
        <text>
          我已阅读并同意
          <text class="color-theme" @click.stop="show('user')"
            >《用户协议》</text
          >
          和
          <text class="color-theme" @click.stop="show('privacy')"
            >《隐私政策》</text
          >
        </text>
      </view>

      <view class=" " style="padding-top: 30rpx; text-align: center">
        <button
          class="btn"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          手机号登录
        </button>
        <view class="btn_back" @click.stop="$router.back()">返回</view>
      </view>
    </view>
  </page>
</template>

<script>
import ossurl from '@/utils/ossurl';
import { H5 } from '@/utils/config';
import store from '@/store';

export default {
  data() {
    return {
      ossurl,
      agreeFlag: false,
    };
  },
  computed: {
    supportHigher() {
      let systemInfo = this.$store.state.systemInfo;
      if (!systemInfo) return false;
      return this.$common.compareVersion(systemInfo.SDKVersion, '2.21.2') >= 0;
    },
  },
  methods: {
    getPhoneNumber(e) {
      console.log(e);
      if (!e.detail.encryptedData) return;
      if (!this.agreeFlag)
        return this.$message.warn('请您先阅读并同意用户协议和隐私政策');
      this.login(e.detail);
    },
    async login(param) {
      let session = {
        openid: store.getters.openId,
        sessionKey: store.getters.sessionKey,
        unionid: store.getters.unionId,
      };
      const res = await this.$service.user.login(
        param.encryptedData,
        param.iv,
        session
      );
      if (res) {
        this.initUser();
        if (!res.needInfo) {
          this.$router.back();
          return;
        }
        uni.navigateTo({
          url: '/subPackages/pages/user_info/index?type=1',
        });
      }
    },
    async initUser() {
      this.$event.emit(this.$event.key.LOGIN);
      await this.$service.user.info();
      await this.$service.user.getHide();
    },
    show(key) {
      this.$router.web(H5[key].url, H5[key].title);
    },
  },
};
</script>

<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.image {
  width: 240rpx;
  border-radius: 20rpx;
}
.btn_back {
  width: 468rpx;
  height: 70rpx;
  line-height: 70rpx;
  border: 2rpx solid #fff;
  border-radius: 50rpx;
  background-color: #fff;
  color: #888888;
  font-size: 24rpx;
  margin-top: 20rpx;
  box-shadow: none;
  text-align: center;
  display: inline-block;
}
.btn {
  width: 468rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: #000000;
  border-radius: 50rpx;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
}
.agree {
  text-align: center;
  font-size: 24rpx;
  margin-top: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom {
  position: absolute;
  bottom: 300rpx;
  width: 100%;
}
</style>
